/*
 * @Author: hcluo
 * @Date: 2020-08-29 10:04:14
 * @LastEditors: hcluo
 * @LastEditTime: 2020-08-29 17:36:46
 * @Description:
 */
import React, { useState } from 'react';
// import PropTypes from 'prop-types';
import { Menu, Dropdown, Button, Icon, Input, Modal } from '@wind/wind-ui';

const title = ['新建板块', '新建子板块', '更改名称'];
export default function LeftTool() {
  const [visible, setVisible] = useState(false);
  const [inputValue, setInputValue] = useState('我的自选股1');
  const [type, setType] = useState(1); //0 为新建板块，1为子版块
  const [disable, setDisable] = useState(true);
  window.LeftToolEnable = b => {
    setDisable(!b);
  };
  return (
    <div className="common-left-tool">
      <Dropdown
        overlay={
          <Menu>
            <Menu.Item
              key="1"
              onClick={() => {
                setType(0);
                setVisible(true);
              }}
            >
              新建板块
            </Menu.Item>
            <Menu.Item
              key="2"
              onClick={() => {
                setType(1);
                setVisible(true);
              }}
            >
              新建子板块
            </Menu.Item>
          </Menu>
        }
      >
        <Button style={{ marginLeft: 8 }}>
          新建
          <Icon type="down" />
        </Button>
      </Dropdown>
      <Button
        onClick={() => {
          window.LeftSideFunction(null, 3);
        }}
        disabled={disable}
      >
        删除
      </Button>
      <Button
        onClick={() => {
          window.LeftSideFunction(1, 4);
        }}
        disabled={disable}
      >
        上移
      </Button>
      <Button
        onClick={() => {
          window.LeftSideFunction(-1, 4);
        }}
        disabled={disable}
      >
        下移
      </Button>
      <Button
        onClick={() => {
          setType(2);
          setVisible(true);
        }}
        disabled={disable}
      >
        更名
      </Button>
      <Modal
        title={title[type]}
        visible={visible}
        onOk={() => {
          setVisible(false);
          window.LeftSideFunction(inputValue, type);
        }}
        onCancel={() => {
          setVisible(false);
          setInputValue('我的自选股1');
        }}
        okText="确认"
        cancelText="取消"
      >
        {title[type]}
        <Input
          value={inputValue}
          onChange={e => {
            setInputValue(e.target.value);
          }}
        />
      </Modal>
    </div>
  );
}

LeftTool.propTypes = {};
LeftTool.defaultProps = {};
